import { DL_curElement_attribute } from '../../../../../../../../../../global/direct/dragList/Classes/cla_dragList_operate/DataDefine/sourceData';
import { dragList } from '../../../../../../../../../../global/direct/dragList/dragList';
import { forBindEventThis } from '../../../../../../../../../../global/direct/Func/eventBind';
// eslint-disable-next-line no-unused-vars
import { freeze_listenEvent_info_mana } from '../../../../../../../../../../global/element/Event/listenEvent_mana/Classes/cla_freeze_listenEvent_info_mana';
import { normalizeContainer } from '../../../../../../../../../../global/element/Func';
import {
  newFloat_settings_form,
  uni_form_attriKey,
} from '../../../../../../DataDefine/sourceData';
import { aunf_fD_uni_comp_cla } from '../../../../DataDefine/sourceData';
import { get_cur_virtual_comps } from '../../../../Func/get_cur_active_comps';
import { remove_add_comps_anima } from '../../../../Func/remove_add_anima_factory';
import {
  auc_operate_direct_dragList_id,
  use_direct_dragList_id,
} from '../../comps/active_uni_comps_operate/DataDefine/sourceData';
import { active_container_dragList_spacename } from '../../DataDefine/sourceData';
import { focusDisplay_comps_add_dataMana } from './cla_focusDisplay_comps_add_dataMana';

const focusDisplay_comps_add_operateTag = 'focusDisplay_comps_add_operate';

/**
 * 使用 dragList 冻结 事件 领域名
 */
const freezeSpace_use_draglist = 'use_draglist';

/**
 * @type {freeze_listenEvent_info_mana}
 */
let freeze_spac;

class focusDisplay_comps_add_operate extends focusDisplay_comps_add_dataMana {
  get [Symbol.toStringTag]() {
    return focusDisplay_comps_add_operateTag;
  }

  constructor() {
    super();

    forBindEventThis(this, 'eventBind');

    this.eventM.addEventListen(
      this.staticNode.comps_container_less,
      'click',
      this.eventBind.less_container_nthChild_click
    );

    this.eventM.addEventListen(
      this.staticNode.comps_container_active,
      'click',
      this.eventBind.active_container_nthChild_click
    );

    this.eventM.addEventListen(
      this.staticNode.btn_certain,
      'click',
      this.eventBind.btn_certain_click
    );

    this.eventM.addEventListen(
      this.staticNode.btn_cancle,
      'click',
      this.eventBind.btn_cancel_click
    );

    this.eventM.addEventListen(
      this.staticNode.use_direct_dragList_inp,
      'click',
      this.eventBind.operate_active_use_direct_dragList_inp_click
    );
  }

  /**
   * 非应用容器 点击 - 将 组件元素 移动到 应用容器 中
   * @param {MouseEvent} event
   */
  less_container_nthChild_click(event) {
    // 如果 非组件元素 退出
    if (!this.is_keyVal_uni_dom(event.target)) {
      return;
    }

    // 将 当前 组件元素 过渡到 应用容器 中
    this.cur_dom_to_active_container(event.target);
  }

  /**
   * 应用容器 点击 - 将 组件元素 移动到 非应用容器 中
   * @param {MouseEvent} event
   */
  active_container_nthChild_click(event) {
    // 如果 非组件元素 退出
    if (!this.is_keyVal_uni_dom(event.target)) {
      return;
    }
    // if (this.is_long_press_ing) {
    //   return;
    // }

    // 将 当前 组件元素 过渡到 非应用容器 中
    this.cur_dom_to_less_container(event.target);
  }

  /**
   * 点击按钮 确认事件
   */
  btn_certain_click() {
    // 触发 一个 自定义 事件 用于 触发 生成 组件
    // console.log('显示 当前 active', this);

    // 由于 提供 active 容器 可拖拽
    // 因此 需要 在 确认时 实时 获取 使用 的 顺序
    this.comps_arr_active = get_cur_virtual_comps();

    // 消失 当前 的 dialog
    this.cancle_dialog(() => {
      // 应用 组件 移除 添加 动画
      remove_add_comps_anima(
        normalizeContainer(newFloat_settings_form),
        this.comps_arr_active
      );
    });
    // this.cur_dialog_operate.targetEl.remove();
  }

  /**
   * 点击按钮 取消事件
   */
  btn_cancel_click() {
    // 消失 当前 的 dialog
    this.cancle_dialog();
  }

  /**
   * 检测当前元素 是否 为 dialog 元素
   * 如果 点击 元素 是 dialog 触发 btn_cancel_click 取消事件
   * @param {MouseEvent} event
   */
  backdrop_click(event) {
    if (event.target == this.cur_dialog_operate.targetEl) {
      this.btn_cancel_click();
    }
  }

  /**
   * 给 active container 启用 dragList 拖拽模式
   */
  active_container_use_direct_dragList() {
    // 添加 active container dragList spacename
    this.staticNode.comps_container_active.setAttribute(
      DL_curElement_attribute.spacename,
      active_container_dragList_spacename
    );

    // 禁用 container 的 点击事件
    freeze_spac = this.eventM.freezeSpace(freezeSpace_use_draglist);

    // 冻结 当前事件
    freeze_spac.freeze([
      this.staticNode.comps_container_less,
      this.staticNode.comps_container_active,
    ]);

    this.active_container_use_dragList_obj = dragList(
      this.staticNode.comps_container_active,
      {
        attriKey: uni_form_attriKey,
        idPrefix: aunf_fD_uni_comp_cla,
        targetData: get_cur_virtual_comps(),
      }
    );
  }

  /**
   * 给 active container 禁用 dragList 拖拽模式
   */
  active_container_remove_direct_dragList() {
    // 移除 active container dragList spacename
    this.staticNode.comps_container_active.removeAttribute(
      DL_curElement_attribute.spacename
    );

    this.active_container_use_dragList_obj.dom_for_draglist_end();

    freeze_spac = this.eventM[freezeSpace_use_draglist];

    freeze_spac.unfreezeAll();
  }

  /**
   * 点击 开启 或 禁用
   * 给 active container 启用 dragList 模式 并 临时 禁用 其他 操作模式
   */
  operate_active_use_direct_dragList_inp_click() {
    /**
     * @type {HTMLInputElement}
     */
    let use_dragList_dom = normalizeContainer(use_direct_dragList_id);

    let use_dragList_border_dom = normalizeContainer(
      auc_operate_direct_dragList_id
    );

    let is_active_dragList = use_dragList_dom.checked;

    // 当 需要 使用
    if (is_active_dragList) {
      this.active_container_use_direct_dragList();
      use_dragList_border_dom.setAttribute('active', 'true');
    } else {
      use_dragList_border_dom.removeAttribute('active');
      this.active_container_remove_direct_dragList();
    }
  }
}

export { focusDisplay_comps_add_operate };
